<template>
  <v-app id="inspire">
    <v-app-bar app clipped-right height="72">
      <v-btn @click="drawer = !drawer">
        <v-icon>
          {{ drawer ? 'arrow_left' : 'arrow_right' }}
        </v-icon>
      </v-btn>
      <BeardCrumbs/>
      <v-spacer></v-spacer>
      <v-responsive max-width="350"></v-responsive>
      <v-spacer></v-spacer>
      <div class="text-center d-flex">
        <div v-if="userInfo" class="d-flex align-center">
          <span class="mr-3">{{ userInfo.username }}</span>
          <v-avatar color="primary" size="40">
            <img v-if="userInfo.avatar" :src="userInfo.avatar" alt=""/>
            <span v-else style="color: white">{{
                userInfo.username[0].toUpperCase()
              }}</span>
          </v-avatar>
          <v-menu :close-on-content-click="isShowSelect" :offset-y="true">
            <template v-slot:activator="{ on, attrs }">
              <v-icon class="ml-2" v-bind="attrs" v-on="on">mdi-cog</v-icon>
            </template>
            <v-list>
              <v-list-item link>
                <v-list-item-title>网站消息</v-list-item-title>
              </v-list-item>
              <v-list-item link to="/member/info">
                <v-list-item-title>个人中心</v-list-item-title>
              </v-list-item>
              <v-list-item link>
                <v-list-item-title @click="logout">退出登录</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>

        <v-btn
          v-else
          color="primary"
          depressed
          class="isShowLoginDialog = !isShowLoginDialog"
          @click="isShowLoginDialog = !isShowLoginDialog"
        >登录
        </v-btn>
        <v-icon class="mx-2" @click="fullScreen">mdi-fullscreen</v-icon>
        <v-switch
          v-model="$vuetify.theme.dark"
          hide-details="auto"
          :label="$vuetify.theme.dark ? '白天' : '夜间'"
        ></v-switch>
        <v-bottom-sheet insert v-model="isShowLoginDialog" width="700px">
          <v-sheet class="text-center" height="200px">
            <v-form class="pa-5" @submit.prevent="login">
              <v-text-field
                label="用户名"
                v-model="loginForm.username"
              ></v-text-field>
              <v-text-field
                label="密码"
                type="password"
                v-model="loginForm.password"
              ></v-text-field>
              <v-btn color="success" class="mr-2" type="submit">登录</v-btn>
              <v-btn color="orange" @click="$router.push('/registry')"
              >注册
              </v-btn>
            </v-form>
          </v-sheet>
        </v-bottom-sheet>
      </div>
    </v-app-bar>

    <v-navigation-drawer v-model="drawer" app width="300">
      <v-navigation-drawer
        v-model="drawer"
        class="avatar-nav"
        absolute
        color="lighten-3"
        mini-variant
      >
        <v-avatar
          class="d-block text-center mx-auto mt-4"
          color="grey darken-1"
          size="36"
        ></v-avatar>

        <v-divider class="mx-3 my-5"></v-divider>

        <v-avatar
          v-for="n in 6"
          :key="n"
          class="d-block text-center mx-auto mb-9"
          color="grey lighten-1"
          size="28"
        ></v-avatar>
      </v-navigation-drawer>

      <v-sheet color="lighten-5" height="128" width="100%"></v-sheet>

      <v-list class="pl-14" shaped>
        <v-subheader>热门</v-subheader>
        <v-list-item
          :to="item.link"
          v-for="(item, index) in items"
          :key="index"
          link
        >
          <v-list-item-action>
            <v-icon small>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title class="item">
              {{ item.title }}
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-main>
      <Nuxt class="pa-3"/>
    </v-main>

    <!-- 消息框 -->
    <v-snackbar v-model="snackbar">
      {{ message }}
      <template v-slot:action="{ attrs }">
        <v-btn color="pink" text v-bind="attrs" @click="snackbar = false"
          >关闭</v-btn
        >
      </template>
    </v-snackbar>
  </v-app>
</template>

<script>
import BeardCrumbs from '~/components/BeardCrumbs.vue'
export default {
  data: () => ({
    drawer: null,
    drawerNav: true,
    isShowLoginDialog: false,
    isShowSelect: false,
    snackbar: false,
    message: '默认消息',
    loginForm: {
      username: '',
      password: '',
    },
    items: [
      {icon: 'home', title: '首页', link: '/'},
      {icon: 'trending_up', title: '热门课程', link: '/courses'},
      {icon: 'subscriptions', title: '我的点赞', link: '/member/likes'},
      {icon: 'subscriptions', title: '我的收藏', link: '/member/collects'},
    ],
  }),
  methods: {
    async login() {
      await this.$auth.loginWith('local', {
        data: this.loginForm,
      })
      this.snackbar = true
      this.message = '登录成功'
      this.isShowLoginDialog = false
    },
    async logout() {
      await this.$auth.logout('local')
      this.snackbar = true
      this.message = '退出成功'
    },
    fullScreen() {
      document.documentElement.requestFullscreen()
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.auth.user
    },
  },
  created() {
    this.$vuetify.theme.dark = true
  },
  components: {BeardCrumbs},
}
</script>

<style lang="scss" scoped>
.avatar-nav {
  z-index: 999;
}

.item {
  display: flex;
  align-items: center !important;

  i {
    margin-right: 5px;
  }
}

.v-input--switch {
  margin-left: 5px;
  align-items: center !important;
}
</style>
